<script lang="ts" setup>
import { PropType } from 'vue'

type artistsType = {
  id: string
  name: string
}

const props = defineProps({
  artists: {
    type: Object as PropType<artistsType[]>,
    required: true
  },
  width: {
    type: String,
    default: () => ''
  }
})
</script>

<template>
  <span :class="{ ellipsis: width, lineWidth: width }">
    <template v-for="(artist, idx) in artists" :key="artist.id">
      <i style="color: var(--music-link-color)" v-if="idx !== 0"> / </i>
      <span class="artist">
        {{ artist.name }}
      </span>
    </template>
  </span>
</template>

<style scoped lang="scss">
.artist {
  color: var(--music-link-color);
  cursor: pointer;
  &:hover {
    color: var(--music-link-hover-color);
  }
}
.lineWidth {
  width: v-bind('props.width');
}
</style>
